<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页面测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .test-button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #1976D2;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        .error {
            background: #ffebee;
            color: #c62828;
        }
        .success {
            background: #e8f5e8;
            color: #2e7d32;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>详情页面API测试</h1>
        
        <div class="test-section">
            <h3>测试机器详情API</h3>
            <button class="test-button" onclick="testMachineDetail(1)">测试机器1详情</button>
            <button class="test-button" onclick="testMachineDetail(2)">测试机器2详情</button>
            <button class="test-button" onclick="testAllAPIs(1)">测试所有API</button>
            <div id="result" class="result"></div>
        </div>
    </div>

    <script>
        const BASE_URL = 'http://localhost:8093/api/monitor';
        
        async function testMachineDetail(machineNumber) {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '测试中...';
            resultDiv.className = 'result';
            
            try {
                const response = await fetch(`${BASE_URL}/machines/${machineNumber}/basic`);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const data = await response.json();
                resultDiv.innerHTML = `✅ 机器${machineNumber}详情获取成功:\n${JSON.stringify(data, null, 2)}`;
                resultDiv.className = 'result success';
            } catch (error) {
                resultDiv.innerHTML = `❌ 错误: ${error.message}`;
                resultDiv.className = 'result error';
            }
        }
        
        async function testAllAPIs(machineNumber) {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '测试所有API中...';
            resultDiv.className = 'result';
            
            try {
                const [basicResponse, chartsResponse, defectsResponse, guideBarsResponse] = await Promise.all([
                    fetch(`${BASE_URL}/machines/${machineNumber}/basic`),
                    fetch(`${BASE_URL}/machines/${machineNumber}/charts`),
                    fetch(`${BASE_URL}/machines/${machineNumber}/defects`),
                    fetch(`${BASE_URL}/machines/${machineNumber}/guide-bars`)
                ]);
                
                // 检查所有响应
                const responses = [
                    { name: '基本信息', response: basicResponse },
                    { name: '图表数据', response: chartsResponse },
                    { name: '疵点统计', response: defectsResponse },
                    { name: '梳栉详情', response: guideBarsResponse }
                ];
                
                let result = '=== API测试结果 ===\n\n';
                let hasError = false;
                
                for (const { name, response } of responses) {
                    if (response.ok) {
                        const data = await response.json();
                        result += `✅ ${name}: 成功\n`;
                        result += `数据长度: ${JSON.stringify(data).length} 字符\n\n`;
                    } else {
                        result += `❌ ${name}: 失败 (${response.status})\n`;
                        hasError = true;
                    }
                }
                
                if (!hasError) {
                    result += '🎉 所有API测试通过！';
                    resultDiv.className = 'result success';
                } else {
                    resultDiv.className = 'result error';
                }
                
                resultDiv.innerHTML = result;
                
            } catch (error) {
                resultDiv.innerHTML = `❌ 测试失败: ${error.message}`;
                resultDiv.className = 'result error';
            }
        }
    </script>
</body>
</html>

